<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域设置</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <!-- 导入ocupload -->
    <script type="text/javascript"
            src="../../js/ocupload/jquery.ocupload-1.1.2.js" ></script>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css" href="../../css/default.css">
    <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
    <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script>
        $.fn.serializeJson=function(){
            var serializeObj={};
            var array=this.serializeArray();
            var str=this.serialize();
            $(array).each(function(){
                if(serializeObj[this.name]){
                    if($.isArray(serializeObj[this.name])){
                        serializeObj[this.name].push(this.value);
                    }else{
                        serializeObj[this.name]=[serializeObj[this.name],this.value];
                    }
                }else{
                    serializeObj[this.name]=this.value;
                }
            });
            return serializeObj;
        };

        //工具栏
        var toolbar = [ {
            id : 'button-edit',
            text : '修改',
            iconCls : 'icon-edit',
            handler : function () {
                
            }
        }, {
            id : 'button-add',
            text : '增加',
            iconCls : 'icon-add',
            handler : function () {
                
            }
        }, {
            id : 'button-delete',
            text : '删除',
            iconCls : 'icon-cancel',
            handler : function () {
                var rows = $('#grid').datagrid("getSelections");
                if(rows.length<1){
                    return;
                }
                var array=new Array();
                $(rows).each(function () {
                    array.push(this.id);
                });
                var ids = array.join(",");
                alert(ids);
                $.get("../../delete_area.action",{"ids":ids},function (data) {
                    $.messager.show({
                        title:'提示',
                        msg:'delete area success',
                        timeout:5000,
                        showType:'slide'
                    });
                    $('#grid').datagrid("reload");
                });
                //清出选中
                $('#grid').datagrid('uncheckAll');
            }
        }, {
            id : 'button-import',
            text : '导入',
            iconCls : 'icon-redo'
        }, {
            id : 'button-search',
            text :'查询',
            iconCls: 'icon-search',
            handler : function(){
                $("#searchWindow").window('open');
            }

        }];
        // 定义列
        var columns = [ [ {
            field : 'id',
            checkbox : true,
        },{
            field : 'province',
            title : '省',
            width : 120,
            align : 'center'
        }, {
            field : 'city',
            title : '市',
            width : 120,
            align : 'center'
        }, {
            field : 'district',
            title : '区',
            width : 120,
            align : 'center'
        }, {
            field : 'postcode',
            title : '邮编',
            width : 120,
            align : 'center'
        }, {
            field : 'shortcode',
            title : '简码',
            width : 120,
            align : 'center'
        }, {
            field : 'citycode',
            title : '城市编码',
            width : 200,
            align : 'center'
        } ] ];

        $(function () {
            $('#grid').datagrid({
                iconCls : 'icon-forward',
                fit : true,
                border : false,
                rownumbers : true,
                striped : true,
                pageList: [30,50,100],
                pagination : true,
                toolbar : toolbar,
                url : "../../area_pageQuery.action",
                idField : 'id',
                columns : columns,
            }) ;

            $('#button-import').upload({
                action : '../../area_batchImport.action',
                onSelect:function () {
                    // 选中文件后，关闭自动提交
                    this.autoSubmit = false ;
                    // 判定文件格式 ，以.xls 或者 .xlsx 结尾
                    var filename = this.filename();
                    var regex = /^.*\.(xls|xlsx)$/ ;
                    if(regex.test(filename)){
                        // 满足
                        this.submit();
                    }else{
                        $.messager.alert("警告","只能上传.xls或.xlsx结尾的文件！","warning");
                    }
                },
                onComplete : function(response){
                    alert("文件上传成功！");
                }
            });

            $('#searchBtn').click(function () {
                var param = $('#searchForm').serializeJson();
                $('#grid').datagrid("load",param);
                $('#searchWindow').window("close");
            });
        });
    </script>
</head>
<body class="easyui-layout">
<div region="center" border="false">
    <table id="grid"></table>
</div>


<div class="easyui-window" title="查询区域窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px">
    <div style="overflow:auto;padding:5px;" border="false">
        <form id="searchForm">
            <table class="table-edit" width="80%" align="center">
                <tr class="title">
                    <td colspan="2">查询条件</td>
                </tr>
                <tr>
                    <td>省份</td>
                    <td>
                        <input type="text" name="province" />
                    </td>
                </tr>
                <tr>
                    <td>城市</td>
                    <td>
                        <input type="text" name="city" />
                    </td>
                </tr>
                <tr>
                    <td>区（县）</td>
                    <td>
                        <input type="text" name="district" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
                </tr>
            </table>
        </form>
    </div>
</div>

</body>
</html>